<template>
	<view class="container">

		<view class="bg-view">
			<view class="bg_box">
				<!-- 顶部状态栏 -->
				<view class="top-nav"
					:style="'height:' + (titleBarHeight+titleBarHeight) + 'px;position:fixed;top:0;width:100vw;'">
					<view class="status_nav"
						:style="'height:' + statusBarHeight + 'px;position:fixed;top:0;width:100vw;'"></view>
					<view class="left-button-box" :style="'height:'+ titleBarHeight +'px;top:'+ statusBarHeight +'px;'"
						@click="tapToBack('back')">
						<image src="../../static/back.png" mode="aspectFill"></image>
					</view>
					<view
						:style="'height:'+ titleBarHeight +'px;line-height:'+ titleBarHeight + 'px;top:'+ statusBarHeight +'px;position:fixed;width:100vw;'"
						class="Index_tab_top">
						<view class="mine-txt"></view>
					</view>
				</view>
				<view :style="'width: 100vw;height:'+(titleBarHeight+titleBarHeight)+'px;'"></view>

			</view>

			<!-- <image src="https://imgs.ynz666.com/test/2023/06/12/YzhjYTU5MzMyOGE0YzQ3YTcwYTE0NzdmOWQ5ZWYzZmE=.png"
				mode="widthFix" class="bg-image "></image> -->
		</view>
		
		
		<view class="title"></view>
		<view class="con">
			<image
				:src="redEvenDetail.pic"
				mode="scaleToFill" class="img"></image>
			<view class="box1">
				{{redEvenDetail.name}}
			</view>
			<view class="box2">
				{{redEvenDetail.description}}
			</view>
			<view class="box3" v-if="redEvenData.price">
				{{redEvenData.price?redEvenData.price/100:0}}
				<view class="v1">
					元
				</view>
			</view>
			<view class="box3" v-else>
				{{redEvenData.message}}
			</view>
		</view>
		
		<view class="foot">
			红包可在下楼休闲吧小程序【我的】→【我的钱包】处提现
		</view>

		

	</view>
</template>

<script>
	var app = getApp();
	import customTabbar from '../../components/custom-tabbar/custom-tabbar.vue';
	import http from '@/utils/request/http.js';
	import env from '@/env/index.js';
	import painter from '@/wxcomponents/painter/painter';
		import { redEvenlopeOpen,redEnvelopeDetail } from '../../apis/index.js';
	export default {

		components: {
			customTabbar,
			painter,
		},
		data() {
			return {
				statusBarHeight: 0,
				titleBarHeight: 0,
				bottomTabbar: 0,
				menuButtonInfo: {},
				mineInfo: {},
				adList: [
					'../../static/lazy_detail.png', '../../static/lazy_detail.png', '../../static/lazy_detail.png'
				],
				showPoster: false,
				template: {},
				saleDate: {},
				codeimg: '',//分享码
				codeimgOne:'',
				codeimgTow:'',
				imagePath: '',
				saleId: '',
				
				saleDetails:[],//收益明细
				total_count:0,
				
				redPacketId:'',
				storeId:'',
				redEvenData:{
					message:''
				},
				redEvenDetail:{},
			};
		},

		onLoad(options) {
			if (options.redPacketId) {
				this.redPacketId = options.redPacketId;
				this.redEvenlopeOpenData();
				this.redEnvelopeDetailData();
			}
			this.storeId=options.store_id
		},
		onReady() {
			this.statusBarHeight = uni.getSystemInfoSync().statusBarHeight;
			this.titleBarHeight = (uni.getMenuButtonBoundingClientRect().top - this.statusBarHeight) * 2 + uni
				.getMenuButtonBoundingClientRect().height;
			this.bottomTabbar = uni.getStorageSync('bottomTabbar');
			this.menuButtonInfo = uni.getMenuButtonBoundingClientRect();
		},
		onShow() {
			this.mineInfo = uni.getStorageSync('mineInfo');
			this.bottomTabbar = uni.getStorageSync('bottomTabbar');
		},
		onShareAppMessage(res) {
			
		},
		methods: {
			redEvenlopeOpenData(){
				redEvenlopeOpen({id:this.redPacketId}).then(res=>{
					console.log(res,"res")
					if(res.data){
						this.redEvenData=res.data
					}else{
						this.redEvenData.message=res.message
					}
					
				})
			},
			redEnvelopeDetailData(){
				redEnvelopeDetail({id:this.redPacketId}).then(res=>{
					console.log(res,"res")
					this.redEvenDetail=res.data
				})
			},
			jumpPage() {
				uni.navigateTo({
					url: `/pageC/earnings/earnings`
				});
			},
			// 返回按钮
			tapToBack(page) {
				// console.log(1)
				switch (page) {
					case 'index':
						uni.switchTab({
							url: '../index/index'
						})
						break;
					case 'back':
						// console.log(2)
						uni.navigateBack({
							delta: 1,
							fail() {
								uni.switchTab({
									url: '../index/index'
								})
							}
						})
						break;
				}
			},
			
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #f4f4f4;
	}

	.container {}

	.left-button-box {
		// width: 160rpx;
		// background-color: rgba(255, 255, 255, 0.5);
		// border-radius: 40rpx;
		display: flex;
		// justify-content: center;
		align-items: center;
		// margin-left: 30rpx;
		// border: 1rpx solid rgba(224, 224, 224, 0.6);
		position: absolute;
		left: 30rpx;
		z-index: 7;

		.line {
			height: 30rpx;
			background: #CCCCCC;
			width: 1rpx;
		}

		image {
			width: 30rpx;
			height: 30rpx;
			margin: 0 20rpx;
		}
	}

	.top-nav {
		position: relative;
		z-index: 5;
	}

	/* 背景 */
	.bg-view {
		width: 100vw;
		height: 131rpx;
		background:rgba(244, 59, 0, 1) ;

		.bg_box {
			height: 131rpx;
			// background: linear-gradient(180deg, #F77539 0%, #FEFDFB 100%);
		}

		.bg-image {
			z-index: -1;
			display: block;
			width: 100%;
			height: 131rpx;
			position: absolute;
			top: 0;
			left: 0;
		}
	}
	
	
	.title{
		width: 100%;
		background:rgba(244, 59, 0, 1) ;
		height: 100rpx;
		border-radius: 0 0 50% 50%;
	}
	.con{
		width: 100%;
		padding-top: 160rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		.img{
			width: 120rpx;
			height: 120rpx;
			border-radius: 16rpx;
			
		}
		.box1{
			font-size: 32rpx;
			font-family: PingFangSC, PingFang SC;
			font-weight: 600;
			color: #333333;
			padding: 17rpx 0 20rpx;
		}
		.box2{
			font-size: 26rpx;
			font-family: PingFangSC, PingFang SC;
			font-weight: 400;
			color: #333333;
		}
		.box3{
			font-size: 60rpx;
			font-family: PingFangSC, PingFang SC;
			font-weight: 600;
			color: #F43B00;
			padding-top: 100rpx;
			display: flex;
			align-items: baseline;
			.v1{
				font-size: 36rpx;
			}
		}
	}
	
	.foot{
		width: 100%;
		display: flex;
		justify-content: center;
		position: fixed;
		bottom: 100rpx;
		font-size: 26rpx;
		font-family: PingFangSC, PingFang SC;
		font-weight: 400;
		color: #999999;
	}

	.status_nav {
		width: 100vw;
	}

	.Index_tab_top {
		font-size: 38rpx;
		font-weight: 500;
		color: #141414;
		text-align: center;
		display: flex;
		align-items: center;
		justify-content: center;
		z-index: 5;

		.scan-box {
			margin-left: 30rpx;
			width: 160rpx;
			height: 58rpx;
			background: rgba(255, 255, 255, 0.1);
			border-radius: 28rpx;
			border: 1rpx solid #FA6400;
			font-size: 24rpx;
			font-weight: bold;
			color: #FFFFFF;
			line-height: 58rpx;
			display: flex;
			align-items: center;
			justify-content: center;

			image {
				width: 28rpx;
				height: 28rpx;
				margin-right: 4rpx;
			}
		}

		.mine-txt {
			color: #fff;
			font-size: 32rpx;
		}
	}

	.share-mission {
		background-color: #fff;
		padding: 20rpx 20rpx 115rpx 20rpx;
	}

	.share-mission-title {
		margin: 20rpx 0;
		font-size: 36rpx;
		font-weight: bold;
		color: #333333;

		view:nth-child(2) {
			font-size: 24rpx;
			color: #999999;
			margin-top: 8rpx;
		}
	}

	.share-mission-list {
		padding: 20rpx 0;
	}

	.share-mission-item {
		display: flex;
		justify-content: space-between;
		align-items: center;

		.mission-left {
			display: flex;
			align-items: center;
		}

		.share-no {
			width: 46rpx;
			height: 46rpx;
			line-height: 46rpx;
			border-radius: 50%;
			background: #FF4D4F;
			font-size: 24rpx;
			font-weight: bold;
			color: #FFFFFF;
			text-align: center;
			margin-right: 20rpx;
		}

		.share-content {
			view:nth-child(1) {
				font-size: 28rpx;
				font-weight: bold;
				color: #333333;
				line-height: 40rpx;
				margin-bottom: 4rpx;
			}

			view:nth-child(2) {
				font-size: 22rpx;
				color: #666666;
				line-height: 30rpx;
			}
		}

		.share-btn {
			width: 100rpx;
			height: 48rpx;
			line-height: 48rpx;
			border-radius: 24rpx;
			border: 1rpx solid #FF4D4F;
			font-size: 22rpx;
			font-weight: bold;
			color: #FF4D4F;
			text-align: center;
		}

		.button-re {
			position: relative;

			button {
				width: 100rpx;
				height: 48rpx;
				border-radius: 24rpx;
				position: absolute;
				top: 0;
				left: 0;
				opacity: 0;
				border: 1rpx solid red;
			}
		}
	}

	.share-progress {
		width: 1rpx;
		height: 50rpx;
		background-color: #efefef;
		margin-left: 24rpx;
	}

	// banner广告
	.index-banner {
		width: 710rpx;
		height: 180rpx;
		margin: 0 auto;
		margin-top: -85rpx;
		border-radius: 12rpx;
		position: relative;

		swiper,
		swiper-item {
			width: 710rpx;
			height: 180rpx;
		}

		image {
			width: 710rpx;
			height: 180rpx;
			display: block;
			border-radius: 12rpx;
		}
	}


	.main1 {
		margin: -66rpx 20rpx 32rpx;
		// height: 138rpx;
		

		.main1_box {
			padding: 30rpx 27rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			background: #FFFFFF;
			border-radius: 20rpx;
			.main1_left {
				.view1 {
					font-size: 26rpx;
					font-family: PingFangSC-Medium, PingFang SC;
					font-weight: 500;
					color: #F53F00;
				}

				.view2 {
					font-size: 24rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #666666;
					margin-top: 8rpx;
				}
			}

			.main1_right {
				width: 120rpx;
				height: 56rpx;
				background: #F43B00;
				border-radius: 28rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 24rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #FFFFFF;
			}
		}
		.main1_box:nth-child(1){
			margin-bottom: 20rpx;
		}
	}






</style>
